<template>
    <div class="page">
        <div class="info">
            <h1 class="title fadeInRight" :class="{done:showTitle}"></h1>
            <h2 class="fadeInRight" :class="{done:showStitle}">成就未来7亿人的汽车生活梦想</h2>
            <p class="fadeInRight" :class="{done:showP}">2014年，凹凸租车创始人张文剑先生和陈韦予女士率先将“车共享”的理念带入中国，创建了私家车共享平台——凹凸租车。2014年5月，凹凸租车正式上线，为出租双方建立了一个安全保障的信息平台，私家车主通过共享闲置车辆获取额外收入，租客则以更经济的价格租到心仪车辆，凹凸租车现已发展为中国共享租车的领导品牌。</p>
            <div class="grid clearfix">
                <div class="grid__item fadeScale" :class="{done:showG1}">
                    <span><sub></sub></span>
                </div>
                <div class="grid__item fadeScale" :class="{done:showG2}">
                    <span><sub></sub></span>
                </div>
                <div class="grid__item fadeScale" :class="{done:showG3}">
                    <span><sub></sub></span>
                </div>
                <div class="grid__item fadeScale" :class="{done:showG4}">
                    <span><sub></sub></span>
                </div>
            </div>
        </div>
        <div class="bg fadeBg" :class="{done:done}"></div>
    </div>
</template>

<script>
export default {
    name: 'page',
    props: ['animate'],
    data () {
        return {
            done: false,
            showTitle: false,
            showStitle: false,
            showP: false,
            showG1: false,
            showG2: false,
            showG3: false,
            showG4: false,
        }
    },
    methods: {
        pageInit() {
            this.done = true;
            setTimeout(() => {
                this.showTitle = true;
            }, 200);
            setTimeout(() => {
                this.showStitle = true;
            }, 400);
            setTimeout(() => {
                this.showP = true;
            }, 600);
            for(let i = 1; i < 5; i++) {
                setTimeout(() => {
                    this['showG'+i] = true;
                }, 800 + 150 * i);
            }
        }
    },
    mounted () {
        if (this.animate) {
            this.pageInit();
        }
    },
    watch: {
        animate(v) {
            if (v && !this.done){
                this.pageInit();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/bg_p2.jpg");
        background-position: center center;
        background-size: cover;
    }
    .info {
        position: absolute;
        z-index: 2;
        width: 100%;
        padding: 0.8rem 0.8rem 0 0.8rem;
        .title {
            display: block;
            margin-bottom: 0.2rem;
            width: 2.74rem;
            height: 0.66rem;
            z-index: 2;
            background: url("../assets/images/title_p2.png");
            background-size: 100% 100%;
        }
        h2 {
            display: inline-block;
            margin-bottom: 0.2rem;
            color: #fff;
            line-height: 1;
            background: #41a3ff;
            font-size: 0.3rem;
            padding: 0.15rem 0.24rem;
            border-radius: 1rem 1rem 1rem 0;
        }
        p {
            display: block;
            color: #fff;
            font-size: 0.28rem;
            line-height: 1.3;
            font-weight: 100;
            text-align: justify;
        }
    }
    .grid {
        padding-top: 0.1rem;
        margin-left: -0.1rem;
        margin-right: -0.1rem;
        &__item {
            width: 50%;
            overflow: hidden;
            float: left;
            position: relative;
            &:after {
                content: "";
                display: block;
                margin-top: 95%;
                width: 100%;
            }
            span {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                padding: 0.15rem 0.2rem;
            }
            sub {
                display: block;
                position: static;
                width: 100%;
                height: 100%;
                background: rgba(0, 37, 71, 0.5);
                border-radius: 0.2rem;
            }
            &:before {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -46%);
                z-index: 2;
                width: 70%;
                height: 70%;
                background-image: url("../assets/images/icon_1_p2.png");
                background-size: 100% 100%;
            }
            @for $i from 1 to 5 {
                &:nth-child(#{$i}):before {
                    background-image: url("../assets/images/icon_#{$i}_p2.png");
                }
            }
        }
    }
}
</style>
